Google製のWebプログラミング言語 Dart を試してみる

斎藤稔

2016.12.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Dart（ダート）とは？

Wikipediaによると、

Dart（ダートもしくはダーツ。当初は Dash と呼ばれていた）はグーグルによって開発されたウェブ向けのプログラミング言語である。2011年10月10日～12日に開催されたデンマークのオーフスで開催された「GOTOカンファレンス」で公開された。この言語は、ウェブブラウザー組み込みのスクリプト言語であるJavaScriptの代替となることを目的に作られた。

Dart｜Wikipedia より引用と、あります。当初はJavaScriptと置き換わるような構想だった様ですが、 Googleは、DartをJavaScriptの直接的なコンペティタと見なすことをやめ、位置づけをJavaScriptへコンパイルされる言語と変えて、TypeScriptやCoffeeScriptなどと同列に置いた。 GoogleのDartプログラミング言語に再びスポットライトが…その高い生産性にまず社内で人気が盛り上がる | TechCrunch　より引用

と、あるように、javaScriptにコンパイルする言語になった様です。

Developers.IOでも以前、取り上げられていましたが、

個人的にノーチェックだったので簡単に見ていきたいと思います。

公式サイト

https://www.dartlang.org/

Dart Developer Summit 2016

Dart Developer Summit 2016 のプレイリスト

APIドキュメント

https://api.dartlang.org/stable/1.20.1/index.html

開発環境

DartPadというブラウザ上でDartを試せるサイトが公開されています。coreライブラリ（dart:ioとdart:ioに依存するライブラリを除く）のみが使えます。

DartPad ： https://dartpad.dartlang.org/

また、IDE（統合開発環境）では、IntelliJ IDEA と WebStorm に対応しています。

多くの機能を利用するにはSDKが必要ですが今回はどんな感じか見たいだけなのでDartPadで試してみます。

DartPad

DartPadの簡単な説明になります。DartPadのサイトにアクセスします。すると、下記のような画面が表示されます。

DART、HTML、CSSでそれぞれのコードを切り替えます。

また右側の出力結果もHTML OUTPUTとCONSOLEを切り替えることが出来ます。

また、コードがエラーの場合は右下にエラーが表示されます。（下の画像は末尾に;が無いエラー）

コードの実行には画面中央の▶ Runボタンを押します。キーボードショートカットの⌘↩でも実行されます。

サンプルコード

また右上のSamplesボタンから色々なサンプルを見ることが出来ます。
一例の紹介です。

helloworld

コンソール上にhello 0からhello 3を出すだけのシンプルなコード

helloworld html

コンソール上にhello 0からhello 3を出し、HtmlにもHello worldと表示するシンプルなコード

Fibonacci

みんなだいすきフィボナッチ数列

Bootstrap demo

Bootstrapのデモサンプル

Solar

太陽系のアニメーション？サンプル

Sunflower

ひまわりの種シミュレーション

Dartを書いてみる

右上のNew Pad...をクリックして新しく立ち上げます。
自動でコードネームが付くみたいです。この時はblue-credit-6398という名前が付きました。これは毎回変わるみたいで、これの前はsilent-hill-7805という名前がついてました。（サイレントヒルっていうホラーゲームあったなぁとちょっと思ってしまった）

HTMLに文字を出力する

HTML側

HTMLを選択して下記タグを入力します。

<p>吾輩は<span id="cat"></span>である</p>
<p>名前は<span id="catName"></span></p>

リアルタイムで右側にHTMLの結果が表示されて便利です。

Dart側

次に、DARTを選択して下記コードを入力します。

import 'dart:html';

void main() {
  var cat = querySelector('#cat');
import 'dart:html';

void main() {
  var cat = querySelector('#cat');
  cat.text = "??";
  querySelector("#catName").text = "まだ無い";
}

main() 関数が最初のエントリーポイントです。
htmlに出力するため、'dart:html'をインポートします。
querySelectorはCSS selector syntaxに一致する要素を取得します。

  var cat = querySelector('#cat');
  cat.text = "??";

と

  querySelector("#catName").text = "まだ無い";

はそれぞれのセレクタを取得して、それに対してテキストを表示しています。
（catの方は一度変数にいれてますが、catNameは直接操作しています）

[参考] querySelector ｜ Dart SDK

実行する

これらのコードを実行すると以下の結果になります。
Dartのコードで定義した文字列が反映されました。

Strong mode

次は個人的にdartで良いなと思ったStrong modeです。
詳細はStrong Mode | dart-lang/dev_compiler | Githubにありますが、簡単に書くと、Strong modeをONにすると型のチェックとかをコンパイラでしてくれます。

たとえば、

void main() {
  var list = ["hello", "world"];
  List<int> listOfInts = list;
  for (int i = 0; i < listOfInts.length; i++) {
    print(listOfInts[i]);
  }
}

のようなコードがった場合、